var width = 960,
    height = 500;

var projection = d3.geoMercator()
    .center([0, 5 ])
    .scale(150)
    .rotate([-180,0]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var path = d3.geoPath()
    .projection(projection);

var g = svg.append("g");

// // load and display the World
// d3.json("world-110m2.json", function(error, topology) {})
//   d3.csv("cities.csv", function(error, data) {  // cities.csv comes back as not found
//     g.selectAll("circle")
//        .data(data)
//        .append("circle")
//        .attr("cx", function(d) {
//                return projection([d.lon, d.lat])[0];
//        })
//        .attr("cy", function(d) {
//                return projection([d.lon, d.lat])[1];
//        })
//        .attr("r", 5)
//        .style("fill", "red");
// });

// load and display the World
d3.json("world-110m2.json", function(error, topology) {
    g.selectAll("path")
      .data(topojson.feature(topology, topology.objects.countries) // originally === topojson.object(...) || changed === topojson.feature  || need to fix
          .geometries)
      .enter()
      .append("path")
      .attr("d", path)
});


// g.selectAll("path")
//     .data(topojson.topology(topology, topology.objects.countries)  // originally === topojson.object(...) need to fix
//         .geometries)
//   .enter()
//     .append("path")
//     .attr("d", path)

// zoom and pan
var zoom = d3.zoom()
    .on("zoom",function() {
        g.attr("transform","translate("+
            d3.translate.join(",")+")scale("+d3.scale+")");
        g.selectAll("path")
            .attr("d", path.projection(projection));
  })

svg.call(zoom)